<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;
            font-family: 'Poppins', sans-serif;
        }

        body {
            /* 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话 */
            overflow-x: hidden;
        }

        .banner {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: #3475ca;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .banner img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.25;
        }

        .content {
            position: relative;
            max-width: 750px;
            text-align: center;
        }

        .content h2 {
            color: #fff;
            font-size: 60px;
        }

        .content p {
            color: #fff;
            font-size: 18px;
        }

        header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 40px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        }

        header .logo {
            color: #fff;
            text-decoration: none;
            font-size: 24px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 1px;
        }

        header .toggle {
            position: relative;
            width: 60px;
            height: 60px;
            background: url(../image/17.png);
            background-size: cover;
            cursor: pointer;
        }

        .about {
            position: relative;
            width: 100%;
            display: flex;
            background: #162c3b;
        }

        .about .contentBx {
            background: #162c3b;
            width: 50%;
            padding: 100px;
        }

        h2.heading {
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        p.text {
            color: #fff;
            font-size: 16px;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .about .imgBx {
            background: url(../image/8.png);
            background-size: cover;
            background-position: center;
            width: 50%;
        }

        .services {
            background: #12222d;
            padding: 100px;
            text-align: center;
        }

        .services .container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 60px;
        }

        .services .container .serviceBx {
            position: relative;
            background: #fff;
            width: 350px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }


        /*  -----------------------第二种----------------------------- */
        .other {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .other h2 {
            font-size: 6em;
            color: #fff;
            font-weight: 500;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100vh;
            padding: 100px;
        }

        .box h2 {
            font-size: 3em;
        }

        .box .logo {
            min-width: 300px;
        }

        .box2 {
            position: relative;
            width: 100%;
            height: 100vh;
            padding: 100px;
            background: #000;
        }

        .box2 h2 {
            font-size: 3em;
            color: #fff;
        }
    </style>
</head>

<body>
    <section class="banner">
        <header>
            <a href="#" class="logo">Brand Name</a>
            <div class="toggle"></div>
        </header>
        <img src="../image/7.png" alt="">
        <div class="content" data-0-top="opacity:0;left:100px;" data-200-top="opacity:1;left:0px;">
            <h2>Success by Design</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.</p>
        </div>
    </section>

    <section class="about">
        <div class="contentBx">
            <h2 class="heading" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:500px;">About Us
            </h2>
            <p class="text" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:-500px;">Lorem Ipsum
                is simply dummy text of the printing and typesetting industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has been the
                industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.</p>
        </div>
        <div class="imgBx" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:200px;"></div>
    </section>

    <section class="services">
        <h2 class="heading" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:500px;">Our Services
        </h2>
        <p class="text" data-center-center="opacity:1;right:0px;" data-0-bottom="opacity:1;right:500px;">Lorem Ipsum is
            simply dummy text of the printing and typesetting industry.Lorem
            ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem
            ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem
            ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem
            ipsum has been the industry's.</p>
        <div class="container">
            <!-- -----------------------------------
                滚
                动
                动
                画
                ------------------------------------------>
            <div class="serviceBx" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:-400px;">
                <div>
                    <img src="../image/10.png" alt="">
                    <h2>Design</h2>
                </div>
            </div>
            <div class="serviceBx" data-center-center="opacity:1;bottom:0px;" data-0-bottom="opacity:0;bottom:-400px;">
                <div>
                    <img src="../image/11.png" alt="">
                    <h2>Development</h2>
                </div>
            </div>
            <div class="serviceBx" data-center-center="opacity:1;right:0px;" data-0-bottom="opacity:0;right:-400px;">
                <div>
                    <img src="../image/12.png" alt="">
                    <h2>Branding</h2>
                </div>
            </div>
        </div>
    </section>
    <section class="techonlogy">
        <div class="contentBx" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:-400px;">
            <h2 class="heading">We use cutting edgr technology</h2>
            <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.Lorem
                ipsum has been the industry's.</p>
        </div>
        <div class="imgBx" data-center-center="opacity:1;right:0px;" data-0-bottom="opacity:0;right:-400px;">
            <img src="../image/13.png" alt="">
        </div>
    </section>

    <section class="client">
        <h2 class="heading" data-center-center="opacity:1;top:0px;" data-0-bottom="opacity:0;top:-100px;">Our Clients
        </h2>
        <p class="text" data-center-center="opacity:1;bottom:0px;" data-0-bottom="opacity:0;bottom:-100px;">Lorem Ipsum
            is simply dummy text of the printing and typesetting industry.Lorem
            ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem
            ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem
            ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem
            ipsum has been the industry's.</p>
        <div class="imgBx">
            <img src="../image/18.png" data-center-center="top:0px;" data-0-bottom="top:100px;">
            <img src="../image/19.png" data-center-center="top:0px;" data-0-bottom="top:150px;">
            <img src="../image/20.png" data-center-center="top:0px;" data-0-bottom="top:200px;">
            <img src="../image/21.png" data-center-center="top:0px;" data-0-bottom="top:250px;">
        </div>
    </section>
    <section class="testimonials">
        <h2 class="heading">What Our Client Says</h2>
        <div class="container">
            <div class="contentBx" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:-400px;">
                <div>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                        industry.Lorem
                        ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                        industry.Lorem
                        ipsum has been the industry's.</p>
                    <br>
                    <h3>Some Famous</h3>
                </div>
            </div>
            <div class="contentBx" data-center-center="opacity:1;right:0px;" data-0-bottom="opacity:0;right:-400px;">
                <div>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                        industry.Lorem
                        ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and typesetting
                        industry.Lorem
                        ipsum has been the industry's.</p>
                    <br>
                    <h3>Some Famous</h3>
                </div>
            </div>
        </div>
    </section>
    <section class="contact">
        <div data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left-400px;">
            <h2 class="heading">Contact us
            </h2>
            <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has
                been
                the industry's.Lorem Ipsum is simply dummy text of the printing and
                typesetting industry.Lorem ipsum has been the industry's.</p>
        </div>
    </section>
    <section class="about">
        <div class="contentBx redbg">
            <div class="form" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left-400px;">
                <div class="inputBx">
                    <input type="text" name="" placeholder="Full Name">
                </div>
                <div class="inputBx">
                    <input type="text" name="" placeholder="Email Address">
                </div>
                <div class="inputBx">
                    <input type="text" name="" placeholder="Mobile No">
                </div>
                <div class="inputBx">
                    <textarea placeholder="Write your Message here"></textarea>
                </div>
                <div class="inputBx">
                    <input type="submit" name="" value="Send">
                </div>
            </div>
        </div>
    </section>

    <section class="footer">
        <p class="text">Design & Developed By Online Turials</p>
        <ul>
            <p class="text">Follow us on:</p>
            <li><a href="#"><img src="" alt=""></a></li>
            <li><a href="#"><img src="" alt=""></a></li>
            <li><a href="#"><img src="" alt=""></a></li>
        </ul>
    </section>
    <script src="../js/skrollr.js"></script>
    <script>
        var s = skrollr.init();
    </script>

    <!-- --------------------------
        第二种
        翻墙 利用GSAP制作滚动
        ---------------------------------- -->

    <section class="other">
        <h2>Scroll To Begin</h2>
    </section>
    <div class="box">
        <h2 class="text1">Scroll Trigger is Awesome</h2>
        <h2 class="text2">This is My First Code</h2>
        <h2 class="text3">How it it?</h2>
        <img src="../images/logo.png" class="logo">
    </div>
    <div class="box2">
        <h2 class="text4">Scroll Trigger is Awesome</h2>
        <h2 class="text5">For More Videos</h2>
        <h2 class="text6">Thanks For Watching:)</h2>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js">
    </script>

    <script>
        gsap.timeline({
            scrollTrigger: {
                trigger: ".box",
                start: "center center",   //Animation start at this point
                end: "bottom top",   //Animation end at this point
                // ---------------markers的值是设置提示的显示和隐藏-----------------------
                markers: true,
                scrub: true,
                pin: true,
            }
        })
            .from(".text1", { x: innerWidth * 1 })
            .from(".text2", { x: innerWidth * -1 })
            .from(".text3", { x: innerWidth * 1 })
            .from(".logo", {
                y: innerHeight * 1,
                rotate: 360
            })

        gsap.timeline({
            scrollTrigger: {
                trigger: ".box2",
                start: "center center",   //Animation start at this point
                end: "bottom top",   //Animation end at this point
                // ---------------markers的值是设置提示的显示和隐藏-----------------------
                markers: true,
                scrub: true,
                pin: true,
            }
        })
            .from(".box2", { opacity: 0 })
            .from(".text4", { y: innerHeight * 1 })
            .from(".text5", { y: innerHeight * 1 })
            .from(".text6", { y: innerHeight * 1 })

    </script>
</body>

</html>